<template>
    <div>
        <div class="container">
            <h1>我的知识库</h1>
            <!-- 新建知识库按钮，点击切换编辑知识组件的显示状态 -->
            <div>
                <el-button type="primary" @click="showEditor = !showEditor">
                    {{ showEditor ? '取消新建' : '新建知识库' }}
                </el-button>
            </div>
        </div>
        <!-- 根据 showEditor 状态显示编辑知识组件 -->
        <div v-if="showEditor" style="display: flex; justify-content: center; align-items: center;">
            <KnowledgeEditor @add-knowledge="addKnowledge" v-model:res="res" />
        </div>

        <div class="container">
            <!-- 使用 PaginationList 组件 -->
            <PaginationList :data="knowledges" title="知识库列表" v-model:pageSize="pageSize"
                v-model:currentPage="currentPage" v-model:total="total" @page-change="change">
                <!-- 自定义列表项展示 -->
                <template #default="{item }">
                    <LibraryCard :library="item" @click="handleCardClick(item)" class="clickable-card">
                        <div>
                            <span class="label">是否公开:</span>
                            <span class="value">{{ item.isPublic===1?'是':'否' }}</span>
                        </div>
                    </LibraryCard>
                </template>
            </PaginationList>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import KnowledgeEditor from '../components/KnowledgeEditor.vue';
import require from '../require';
import { onMounted } from 'vue';
import PaginationList from '../components/PaginationList.vue';
import { UserStore } from '../store/user';
import { useRouter } from 'vue-router';
// 引入 LibraryCard 组件
import LibraryCard from '../components/LibraryCard.vue';

const router = useRouter();

const res = ref(null);

const pageSize = ref(10); // 每页显示的数量
const currentPage = ref(1); // 当前页码
const total = ref(10); // 总数量

const knowledges = ref([
    // 示例数据
    {
        libraryId: 1,
        name: '示例知识库',
        description: '一个示例知识库',
        articleCount: 10,
        createTime: '2025-05-05',
        updateTime: '2025-05-05',
        creatorId: 1,
        libraryId: 1,
        isPublic: '是',
        likedAmounts: 0,
        collectedAmounts: 0,
        commentedAmounts: 0,
        currentUserCollect: false,
        currentUserLike: false,
    },
]);

// 页面加载完成后获取数据
onMounted(async () => {


    knowledges.value = await queryLibrary(0, pageSize.value);
    
    const store = UserStore();    

    total.value = store.userInfo.libraryAmount;
    
    console.log(knowledges.value)
});

const queryLibrary = async (start, size) => {
    const res = await require.post('user/queryLibrary', {
        start: start,
        size: size,
    });
    if (res?.libraryList?.length > 0 && res.libraryList[0].creatorUser) {
        const store = UserStore();
        store.saveUser(res.libraryList[0].creatorUser);
    }
    const alist = [];
    for (let i = 0; i < res.libraryAmount; i++) {
        const e = res.libraryList[i];
        alist.push({
            libraryId: e.libraryId,
            name: e.libraryName,
            description: e.description,
            articleCount: e.articleAmounts,
            createTime: e.createTime,
            updateTime: e.updateTime,
            creatorId: e.creatorUser.userId,
            isPublic: e.isPublic,
            likedAmounts: e.likedAmounts, // 确保有这些属性
            collectedAmounts: e.collectedAmounts,
            commentedAmounts: e.commentedAmounts,
            currentUserCollect: e.currentUserCollect,
            currentUserLike: e.currentUserLike,
        })
    }
    return alist
}

const change = async (page) => {
    console.log(`当前页码已变更为: ${page}`);

    knowledges.value = [];

    knowledges.value = await queryLibrary((page - 1) * pageSize.value, pageSize.value);

    const store = UserStore();

    total.value = store.userInfo.libraryAmount;

    console.log(knowledges.value)
}


// 控制编辑知识组件显示状态的 ref
const showEditor = ref(false);

const addKnowledge = async (newKnowledge) => {
    console.log('新增知识库:', newKnowledge);
    knowledges.value = await queryLibrary(0, pageSize.value);
    const store = UserStore();
    total.value = store.userInfo.libraryAmount;
    showEditor.value = false;
};

// 处理行点击事件
const handleCardClick = (row) => {
    console.log('点击的知识库信息:', row);
    // 在这里可以添加跳转页面或其他操作
    router.push({ name: 'Library', query: { id: row.libraryId } });
};
</script>

<style scoped>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
}
.container {
    display: flex;
    flex-direction: column;/* 将主轴方向改为垂直 */
    justify-content: center;/* 默认主轴开始对齐 */
    align-items: center;/* 默认交叉轴开始对齐 */
    padding: 20px;
}
button {
    padding: 8px 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
}
button:hover {
    background-color: #0056b3;
}

.clickable-card {
    cursor: pointer;
}

.clickable-card:hover {
    background-color: #f0f0f0;
    /* 鼠标悬停时的背景颜色，可根据需求调整 */
}

.label {
    font-weight: bold;
    margin-right: 10px;
    text-align: right;
    color: #606266;
    margin-top: 10px ;
}
</style>